<template>
  <view class="chat-container">
    <!-- 聊天消息列表 -->
    <scroll-view class="chat-messages" scroll-y="true" :scroll-top="scrollTop">
      <!-- 欢迎消息 -->
      <view class="message-item assistant-message">
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
        <view class="message-bubble">
          <text class="message-text">您好! 欢迎来到营养调理课堂, 每天限时99个名额免费领取。先了解下您的基本状况, 便于分配专业的老师为您服务, 请认真回答!</text>
        </view>
      </view>

      <!-- 第一个问题 -->
      <view class="message-item assistant-message">
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
        <view class="message-bubble">
          <text class="message-text">之前是否了解过相关知识吗?</text>
        </view>
      </view>

      <!-- 选项按钮 -->
      <view class="options-container">
        <view class="option-button" @click="selectOption('是', 'knowledge')">
          <text class="option-text">是</text>
        </view>
        <view class="option-button" @click="selectOption('否', 'knowledge')">
          <text class="option-text">否</text>
        </view>
      </view>

      <!-- 用户回答 -->
      <view class="message-item user-message" v-if="userAnswers.knowledge">
        <view class="message-bubble">
          <text class="message-text">{{ userAnswers.knowledge }}</text>
        </view>
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
      </view>

      <!-- 年龄问题 -->
      <view class="message-item assistant-message" v-if="userAnswers.knowledge">
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
        <view class="message-bubble">
          <text class="message-text">您今年多大年龄?</text>
        </view>
      </view>

      <!-- 年龄选项 -->
      <view class="options-container" v-if="userAnswers.knowledge">
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.age === '40-50岁' }"
          @click="selectOption('40-50岁', 'age')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.age === '40-50岁' }">40-50岁</text>
        </view>
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.age === '50-60岁' }"
          @click="selectOption('50-60岁', 'age')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.age === '50-60岁' }">50-60岁</text>
        </view>
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.age === '60岁以上' }"
          @click="selectOption('60岁以上', 'age')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.age === '60岁以上' }">60岁以上</text>
        </view>
      </view>

      <!-- 用户年龄选择 -->
      <view class="message-item user-message" v-if="userAnswers.age">
        <view class="message-bubble">
          <text class="message-text">{{ userAnswers.age }}</text>
        </view>
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
      </view>

      <!-- 学习目的问题 -->
      <view class="message-item assistant-message" v-if="userAnswers.age">
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
        <view class="message-bubble">
          <text class="message-text">您学习营养调理的目的是?</text>
        </view>
      </view>

      <!-- 学习目的选项 -->
      <view class="options-container" v-if="userAnswers.age">
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.purpose === '身体修复' }"
          @click="selectOption('身体修复', 'purpose')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.purpose === '身体修复' }">身体修复</text>
        </view>
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.purpose === '改善机能' }"
          @click="selectOption('改善机能', 'purpose')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.purpose === '改善机能' }">改善机能</text>
        </view>
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.purpose === '保护家人健康' }"
          @click="selectOption('保护家人健康', 'purpose')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.purpose === '保护家人健康' }">保护家人健康</text>
        </view>
      </view>

      <!-- 用户学习目的选择 -->
      <view class="message-item user-message" v-if="userAnswers.purpose">
        <view class="message-bubble">
          <text class="message-text">{{ userAnswers.purpose }}</text>
        </view>
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
      </view>

      <!-- 症状问题 -->
      <view class="message-item assistant-message" v-if="userAnswers.purpose">
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
        <view class="message-bubble">
          <text class="message-text">目前自身有无症状?</text>
        </view>
      </view>

      <!-- 症状选项 -->
      <view class="options-container" v-if="userAnswers.purpose">
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.symptoms === '三高、慢性病' }"
          @click="selectOption('三高、慢性病', 'symptoms')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.symptoms === '三高、慢性病' }">三高、慢性病</text>
        </view>
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.symptoms === '神经紊乱' }"
          @click="selectOption('神经紊乱', 'symptoms')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.symptoms === '神经紊乱' }">神经紊乱</text>
        </view>
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.symptoms === '脂肪肝' }"
          @click="selectOption('脂肪肝', 'symptoms')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.symptoms === '脂肪肝' }">脂肪肝</text>
        </view>
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.symptoms === '肠胃炎' }"
          @click="selectOption('肠胃炎', 'symptoms')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.symptoms === '肠胃炎' }">肠胃炎</text>
        </view>
        <view 
          class="option-button" 
          :class="{ 'selected': userAnswers.symptoms === '骨关节等问题' }"
          @click="selectOption('骨关节等问题', 'symptoms')"
        >
          <text class="option-text" :class="{ 'selected-text': userAnswers.symptoms === '骨关节等问题' }">骨关节等问题</text>
        </view>
      </view>

      <!-- 用户症状选择 -->
      <view class="message-item user-message" v-if="userAnswers.symptoms">
        <view class="message-bubble">
          <text class="message-text">{{ userAnswers.symptoms }}</text>
        </view>
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
      </view>

      <!-- 确认消息 -->
      <view class="message-item assistant-message" v-if="userAnswers.symptoms">
        <view class="avatar">
          <image src="./img/user-avatar.png" class="avatar-img"></image>
        </view>
        <view class="message-bubble">
          <text class="message-text">好的,张博士已收到。</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部添加老师微信按钮 -->
    <view class="bottom-button" v-if="userAnswers.symptoms" @click="addTeacherWechat">
      <text class="button-text">点击添加老师微信</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ChatPage',
  data() {
    return {
      scrollTop: 0,
      userAnswers: {
        knowledge: '',
        age: '',
        purpose: '',
        symptoms: ''
      }
    }
  },
  methods: {
    selectOption(value, type) {
      this.userAnswers[type] = value
      this.scrollToBottom()
    },
    
    scrollToBottom() {
      // 延迟滚动到底部，确保DOM更新完成
      setTimeout(() => {
        this.scrollTop = 999999
      }, 100)
    },
    
    addTeacherWechat() {
      uni.showModal({
        title: '添加老师微信',
        content: '是否要添加张博士的微信？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '已发送好友申请',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.chat-container {
  width: 100%;
  min-height: calc(100vh - 44px);
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  padding: 30rpx;
  padding-bottom: 180rpx;
}

.message-item {
  display: flex;
  margin-bottom: 30rpx;
  align-items: flex-start;
}

.assistant-message {
  justify-content: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.message-bubble {
  max-width: 70%;
  margin: 0 20rpx;
  padding: 24rpx 32rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.assistant-message .message-bubble {
  background-color: #f0f0f0;
  color: #333;
}

.user-message .message-bubble {
  background-color: #ffb3d9;
  color: #333;
}

.message-text {
  font-size: 28rpx;
  line-height: 1.5;
  word-wrap: break-word;
}

.options-container {
  margin: 20rpx 0 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.option-button {
  background-color: #fff;
  border: 2rpx solid #e0e0e0;
  border-radius: 20rpx;
  padding: 24rpx 32rpx;
  min-width: 200rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.option-button.selected {
  border-color: #007AFF;
}

.option-text {
  font-size: 28rpx;
  color: #666;
  transition: color 0.3s ease;
}

.option-text.selected-text {
  color: #007AFF;
  font-weight: 500;
}

.option-button:active {
  transform: scale(0.98);
}

.bottom-button {
  position: fixed;
  bottom: 40rpx;
  left: 40rpx;
  right: 40rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(255, 107, 53, 0.3);
}

.button-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
}

.bottom-button:active {
  transform: scale(0.98);
}
</style> 